<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <div style="height: auto;">
      <button
      style="width: 100px;height: 40px;border: 1px solid #ccc;"
        v-for="(item, index) in list"
        :key="index"
        @click="buttonClick(item)"
      >
        {{ item.name }}
      </button>
    </div>
    <div style="flex: 1">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, shallowRef } from "vue";
import base from "./components/base.vue";
import base2 from "./components/base2.vue";

interface listType {
  name: string;
  component: ReturnType<typeof defineComponent>;
}
let list: listType[] = [
  {
    name: "base",
    component: base,
  },
  {
    name: "base2",
    component: base2,
  },
];

let currentComponent = shallowRef(base);
const buttonClick = (item: listType) => {
  currentComponent.value = item.component;
};
</script>

<style scoped></style>
